import React, { Component } from 'react'
import style from './homeSwipe.module.scss'
import { getSwipeList, imgUrl } from '@/api/'
import { connect } from 'react-redux'
import { NavLink } from 'react-router-dom'

class HomeSwipe extends Component {
    constructor(props) {
        super(props)
        this.state = {
            swipeDate: []
        }
    }
    componentDidMount() {
        let param = {
            'latitude': this.props.currentLocation.latitude,
            'longitude': this.props.currentLocation.longitude,
            'terminal': 'h5',
        }
        getSwipeList(param).then((res) => {
            this.setState({
                swipeDate: res
            })
        })
    }
    render() {
        return (
            <div>
                <ul className={style.swipeBox}>{this.swipeFn()}</ul>
                <div className={style.setMeal}>{this.setMealFn()}</div>
                <div className={style.svipBox}>{this.svipboxFn()}</div>
            </div>
        )
    }
    swipeFn = () => {
        return this.state.swipeDate[1]?.entries.map((item, index) => {
            return (
                <NavLink key={item.id} className={style.swipeItem} to={'/category/' + item.id}>
                    <img className={style.swipeImg} src={imgUrl + item.image_hash} alt="" />
                    <span className={style.swipeName}>{item.name}</span>
                </NavLink>
            )
        })
    }
    //会员和套餐
    setMealFn = () => {
        // let setMealObj = this.state.swipeDate[0]?.entries[0];
        return (<div className={style.setMeaBox}>
            <div>
                <p className={style.txtone}>品质套餐</p>
                <p className={style.txttwo}>搭配齐全吃得好</p>
                <p className={style.txtthree}>立即抢购 》</p>
            </div>
            <img className={style.setMealImg} src={require('@/static/imges/setmealImg.webp')} alt="" />
        </div>)
    }
    //会员
    svipboxFn = () => {
        let svipObj = this.state.swipeDate[0]?.entries[0];
        return (
            <div className={style.svipContent}>
                <div >
                    <img className={style.svipImg} src={imgUrl + svipObj?.image_hash} alt="" />
                    <span className={style.svipTxtOne}>超级会员</span>
                    <span className={style.svipTxtTwo}>.每月领20元红包</span>
                </div>
                <span className={style.svipTxtThere}>限时6元开通》</span>
            </div>
        )
    }
}

const stateToProps = (state) => {
    // console.log(state);
    return {
        currentLocation: state.region.currentLocation,
        LocationSelected: state.shipping.LocationSelected
    }
}

const dispatchToProps = (dispatch) => {
    return {

    }
}


export default connect(stateToProps, dispatchToProps)(HomeSwipe)
